<template>
  <div class="id">
    <!-- 顶部 -->
    <div class="navtop">
      <van-nav-bar title="发布房源" left-arrow @click-left="onClickLeft" />
    </div>
    <!-- 房源信息 -->
    <p
      style="
        margin-top: 46px;
        margin-bottom: 0;
        font-size: 18px;
        padding: 10px 0 10px 15px;
        color: #21b97a;
      "
    >
      房源信息
    </p>
    <van-divider />
    <div class="main">
      <!-- 小区名称 -->
      <van-cell title="小区名称" value="请输入小区名称" is-link> </van-cell>

      <!-- 租金 -->
      <van-cell title="租  金" value="$/月" is-link center>
        <template #label>
          <van-field v-model="valueprice" placeholder="请输入租金/月" />
        </template>
      </van-cell>

      <!-- 建筑面积 -->
      <van-cell title="建筑面积" value="m²" is-link>
        <template #label>
          <van-field v-model="valuem2" placeholder="请输入建筑面积" />
        </template>
      </van-cell>
      <!-- 户型 -->
      <van-cell
        title="户型"
        :value="huxing.label ? huxing.label : '请选择'"
        is-link
        @click="showzujin = true"
      />
      <!-- 户型弹窗 --------------->
      <van-popup
        v-model="showzujin"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-picker
          title="户型"
          show-toolbar
          :columns="columnshu"
          @confirm="onConfirmhuxing"
          @cancel="onCancelhuxing"
          @change="onChangehuxing"
        />
      </van-popup>
      <!-- 所在楼层 -->
      <van-cell
        title="所在楼层"
        :value="louceng.label ? louceng.label : '请选择'"
        is-link
        @click="showlouceng = true"
      />
      <!-- 楼层弹窗 -->
      <van-popup
        v-model="showlouceng"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-picker
          title="楼层"
          show-toolbar
          :columns="columnslo"
          @confirm="onConfirmlouceng"
          @cancel="onCancellouceng"
          @change="onChangelouceng"
        />
      </van-popup>
      <!-- 朝向 -->
      <van-cell
        title="朝向"
        :value="chaoxiang.label ? chaoxiang.label : '请选择'"
        is-link
        @click="showchaoxiang = true"
      />
      <!-- 朝向弹窗 -->
      <van-popup
        v-model="showchaoxiang"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <van-picker
          title="朝向"
          show-toolbar
          :columns="columnschao"
          @confirm="onConfirmchaoxiang"
          @cancel="onCancelchaoxiang"
          @change="onChangechaoxiang"
        />
      </van-popup>
    </div>
    <!-- 房屋标题-->
    <p
      style="
        margin-top: 0;
        margin-bottom: 0;
        font-size: 15px;
        font-weight: 400;
        color: #010101;
        padding: 10px 0 10px 15px;
      "
    >
      房屋标题
    </p>
    <van-divider />
    <div class="info">
      <van-field v-model="valuename" placeholder="请输入用户名" />
    </div>
    <!-- 房屋图像 -->
    <p
      style="
        margin-top: 0;
        margin-bottom: 0;
        font-size: 15px;
        font-weight: 400;
        color: #010101;
        padding: 10px 0 10px 15px;
      "
    >
      房屋图像
    </p>
    <van-divider />
    <div class="buttontu">
      <div class="img">
        <van-row gutter="4">
          <van-col
            span="6"
            style="position: relative"
            v-for="(itms, index) in imgrel"
            :key="index"
            ><van-image height="100" :src="itms" /><span
              style="position: absolute; right: 0; padding: 5px; color: red"
              @click="deleFn(index)"
              >*</span
            ></van-col
          >
          <van-col span="6">
            <van-button type="default" @click="$refs.input.click()"
              >+</van-button
            ></van-col
          >
        </van-row>
      </div>

      <input type="file" ref="input" hidden @change="addtu" multiple />
    </div>
    <!-- 房屋配置 -->
    <div class="foorterb">
      <span
        style="
          display: inline-block;
          margin-top: 0;
          margin-bottom: 0;
          font-size: 15px;
          font-weight: 200;
          color: #010101;
          padding: 10px 0 10px 15px;
        "
      >
        房屋配置
      </span>
      <van-row gutter="1" type="flex" justify="center">
        <van-col
          span="4"
          v-for="(itms, index) in xiangqing1"
          :key="index"
          @click="addicon(itms.text)"
          :class="{ active: active.indexOf(itms.text) !== -1 }"
        >
          <span :class="['zufang', itms.icon]"></span>

          <p>{{ itms.text }}</p>
        </van-col>
      </van-row>
      <van-row gutter="1" type="flex" justify="center">
        <van-col
          span="4"
          v-for="(itms, index) in xiangqing2"
          :key="index"
          @click="addicon(itms.text)"
          :class="{ active: active.indexOf(itms.text) !== -1 }"
        >
          <span :class="['zufang', itms.icon]"></span>
          <p>{{ itms.text }}</p>
        </van-col>
      </van-row>
      <van-divider />
    </div>
    <!-- 房屋描述 -->
    <div
      class="footerdibu"
      style="
        margin-top: 70px;
        background-color: #f5f5f9;
        width: 100%;
        overflow: hidden;
        margin-top: 70px;
      "
    >
      <p
        style="
          background-color: #fff;
          margin-bottom: 0;
          font-size: 15px;
          font-weight: 400;
          color: #010101;
          padding: 10px 0 10px 15px;
        "
      >
        房屋描述
      </p>
      <van-divider />
      <!-- 内容 -->
      <van-field
        v-model="messagemiaoshu"
        rows="2"
        autosize:autpsize
        type="textarea"
        placeholder="请输入留言"
      />
    </div>
    <div class="divv" style="margin-top: 88px; height: 100px"></div>
    <!-- 确定取消 -->
    <div class="flooter">
      <van-button type="default">取消发布</van-button>
      <van-button type="primary" @click="baseUrldata">确定提交</van-button>
    </div>
  </div>
</template>

<script>
import { pluginChanGeApi, userHousesApi } from '@/api'
export default {
  data() {
    return {
      valueprice: '',
      valuem2: '',
      valuename: '',
      imgrel: [],
      messageconten: '',
      messagemiaoshu: '',
      active: [],
      showzujin: false,
      showlouceng: false,
      showchaoxiang: false,
      columnshuxing: [
        { label: '一室', value: 'ROOM|d4a692e4-a177-37fd' },
        { label: '二室', value: 'ROOM|d1a00384-5801-d5cd' },
        { label: '三室', value: 'ROOM|20903ae0-c7bc-f2e2' },
        { label: '四室', value: 'ROOM|ce2a5daa-811d-2f49' },
        { label: '四室+', value: 'ROOM|2731c38c-5b19-ff7f' }
      ],
      columnslouceng: [
        { label: '高楼层', value: 'FLOOR|1' },
        { label: '中楼层', value: 'FLOOR|2' },
        { label: '低楼层', value: 'FLOOR|3' }
      ],
      columnschaoxiang: [
        { label: '东', value: 'ORIEN|141b98bf-1ad0-11e3' },
        { label: '西', value: 'ORIEN|103fb3aa-e8b4-de0e' },
        { label: '南', value: 'ORIEN|61e99445-e95e-7f37' },
        { label: '北', value: 'ORIEN|caa6f80b-b764-c2df' },
        { label: '东南', value: 'ORIEN|dfb1b36b-e0d1-0977' },
        { label: '东北', value: 'ORIEN|67ac2205-7e0f-c057' },
        { label: '西南', value: 'ORIEN|2354e89e-3918-9cef' },
        { label: '西北', value: 'ORIEN|80795f1a-e32f-feb9' }
      ],
      xiangqing1: [
        { icon: 'zufang-yigui', text: '衣柜' },
        { icon: 'zufang-xiyiji1', text: '洗衣机' },
        { icon: 'zufang-kongtiao', text: '空调' },
        { icon: 'zufang-meiqitianranqi', text: '天然气' },
        { icon: 'zufang-bingxiang', text: '冰箱' }
      ],
      xiangqing2: [
        { icon: 'zufang-nuanqi', text: '暖气' },
        { icon: 'zufang-dianshiji', text: '电视' },
        { icon: 'zufang-reshuiqi', text: '热水器' },
        { icon: 'zufang-wuxianwangluo', text: '宽带' },
        { icon: 'zufang-shafa', text: '沙发' }
      ],
      huxing: '',
      louceng: '',
      chaoxiang: '',
      autpsize: { maxHeight: 200, minHeight: 50 }
    }
  },
  computed: {
    columnshu() {
      return this.columnshuxing.map((itms) => itms.label)
    },
    columnslo() {
      return this.columnslouceng.map((itms) => itms.label)
    },
    columnschao() {
      return this.columnschaoxiang.map((itms) => itms.label)
    }
  },

  methods: {
    onClickLeft() {
      this.$router.push('/home ')
    },
    addtu() {
      URL.createObjectURL(this.$refs.input.files[0])
      const a = this.$refs.input.files
      if (a.length > 1) {
        this.imgrel.push(
          ...[...this.$refs.input.files].map((itme) =>
            URL.createObjectURL(itme)
          )
        )
      } else {
        this.imgrel.push(URL.createObjectURL(this.$refs.input.files[0]))
      }
      // this.$refs.input.value = ''
    },
    deleFn(index) {
      this.imgrel = this.imgrel.filter((itms, inde) => inde !== index)
    },
    //确定点击
    async baseUrldata() {
      try {
        this.$toast.loading({
          message: '发送中...',
          forbidClick: true,
          duration: 0
        })
        const fm = new FormData()
        const a = this.$refs.input.files
        ;[...a].forEach((itme) => fm.append('file', itme))
        const b = await pluginChanGeApi(fm)
        const c = b.data.body.join('|')
        await userHousesApi({
          title: this.valuename || '',
          description: this.messagemiaoshu || '',
          houseImg: c,
          oriented: this.chaoxiang.value || '',
          supporting: this.active.join('|') || '',
          price: this.valueprice || '',
          roomType: this.huxing.value || '',
          size: this.valuem2 || '',
          floor: this.louceng.value || '',
          community: 'AREA|b5427d73-a88d-fb05'
        })
        this.$toast.success('发布成功')
        this.$router.push('/home ')
      } catch (error) {
        this.$oast.fail('发送失败')
      }
    },
    async meiyong() {
      await userHousesApi()
      await pluginChanGeApi()
    },
    addicon(a) {
      const b = this.active.indexOf(a)
      if (b !== -1) {
        this.active = this.active.filter((itms) => itms !== a)
      } else {
        this.active.push(a)
      }
    },
    //户型完成时触发
    onConfirmhuxing(value, index) {
      const a = this.columnshuxing.filter((itme) => itme.label === value)
      this.huxing = a[0]
      this.showzujin = false
    },
    //户型取消触发
    onCancelhuxing(picker, value, index) {
      this.huxing = ''
      this.showzujin = false
    },
    //户型改变触发
    onChangehuxing() {
      console.log('户型改变触发')
    },
    //楼层完成触发
    onConfirmlouceng(value, index) {
      const a = this.columnslouceng.filter((itme) => itme.label === value)
      this.louceng = a[0]
      this.showlouceng = false
    },
    //楼层取消触发
    onCancellouceng(picker, value, index) {
      this.louceng = ''
      this.showlouceng = false
    },
    //楼层改变触发
    onChangelouceng() {},
    //朝向完成触发
    onConfirmchaoxiang(value, index) {
      const a = this.columnschaoxiang.filter((itme) => itme.label === value)
      this.chaoxiang = a[0]
      this.showchaoxiang = false
    },
    //朝向取消触发
    onCancelchaoxiang(picker, value, index) {
      this.chaoxiang = ''
      this.showchaoxiang = false
    },
    //朝向改变触发
    onChangechaoxiang() {}
  }
  //图片触发
}
</script>

<style scoped lang="less">
:deep(.van-divider) {
  margin: unset;
}
:deep(.navtop) {
  top: 0;
  position: fixed;
  z-index: 1000;
  width: 100%;
  background-color: #21b97a;
  .van-nav-bar {
    background-color: unset;
  }
  .van-nav-bar__title {
    color: #fff;
  }
  .van-icon {
    color: #fff;
  }
}
:deep(.main) {
  .van-cell {
    padding: 26px 10px;
    background-color: unset;
  }
  .van-field {
    padding: unset;
    margin-left: 60px;
    height: 50px;
    font-size: 29px;
  }
  .van-cell__title {
    display: flex;
    & > span {
      margin-top: 5px;
      width: 3.6rem;
      margin-left: 15px;
    }
  }
}
:deep(.buttontu) {
  .van-button {
    width: 100%;
    height: 200px;
    font-size: 160px;
    font-weight: 100;
  }
}
.flooter {
  width: 100%;
  position: fixed;
  height: 88px;
  bottom: 0;
  .van-button {
    width: 50%;
  }
}
:deep(.foorterb) {
  width: 100%;
  height: 200px;
  .van-col--4 {
    width: 20%;
  }
  p {
    font-size: 20px;
  }
  .van-col {
    text-align: center;
  }
  .zufang {
    font-size: 36px;
  }
  .active {
    color: #21b98f;
  }
}
</style>
